<template>
  <div class="parent">
    <div class="header">
      <div :class="{spread:spread, short:!spread, logo:true}">

      </div>
      <div class="bar">

      </div>
    </div>
    <div class="container">
      <div :class="{spread:spread, short:!spread, left:true}">
        <el-button v-if="spread" type="primary" icon="el-icon-caret-left" @click="changeSpread" style="width:100%;"></el-button>
        <el-button v-else type="primary" icon="el-icon-caret-right" @click="changeSpread" style="width:100%;"></el-button>
        <el-menu 
          default-active="2" 
          class="el-menu-vertical-demo" 
          @open="handleOpen"
          @close="handleClose" 
          background-color="#545c64"
          text-color="#fff" 
          active-text-color="#ffd04b"
          collapse=true>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
          </el-menu>
      </div>
      <div class="main">

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        spread: true,
      }
    },
    methods: {
      changeSpread() {
        this.spread = !this.spread;
      }
    },
    computed: {

    }
  }

</script>

<style scoped>
  .spread {
    /*display: none;*/
    /*width: 200px; */
    animation: spread-enter 0.5s;
    /* forwards 动画结束后定格到100%的状态 */
    animation-fill-mode: forwards;
    /*定义动画播放次数 num / infinite(无限次)*/
    animation-iteration-count: 1;
  }
  
  .short {
    /*width: 50px;*/
    animation: spread-leave 0.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
  }
  
  .parent {
    height: 100%;
    padding: 60px 0 0;
    /*position: relative;*/
    box-sizing: border-box;
  }
  
  .header {
    /*position: absolute; top: 0 ; left: 0;*/
    margin: -60px 0 0;
    height: 60px;
  }
  
  .header .logo {
    height: 100%;
    background-color: black;
    float: left;
  }
  
  .header .bar {
    width: 100%;
    height: 100%;
    background-color: lightgreen;
  }
  
  .container {
    width: 100%;
    height: 100%;
  }
  
  .container .left {
    float: left;
    /*height: 100px;*/
    height: 100%;
    background-color: gray;
  }
  
  .container .main {
    /*height: 600px;*/
    height: 100%;
    width: 100%;
    /*border: 1px solid black;*/
  }
  /* CSS3动画 */
  
  @keyframes spread-enter {
    0% {
      width: 50px;
    }
    100% {
      width: 200px;
    }
  }
  
  @keyframes spread-leave {
    0% {
      width: 200px;
    }
    100% {
      width: 50px;
    }
  }
</style>